const pagingNext = document.querySelector('#paging-next');
const pagingPrevious = document.querySelector('#paging-previous');
const pagingNumBtns = document.querySelectorAll('.paging-num');
const index=0;
const lastIndex=0;
function htmlRendering(resp) {
    if (resp.code === 200) {
        const { list } = resp.body;
        tbody.innerHTML = list.reduce((html, person, index) => {
            return html + `
                <tr data-id="${person.id}">
                    <td>${index + 1}</td>
                    <td><span>${person.name}</span><input class="editName" type="text"> </td>
                    <td><span>${person.price}</span><input class="editPrice" type="text"></td>
                    <td><span>${person.num}</span><input type="text" class="editNum"></td>
                    <td>
                        <button class="btn btn-info btn-xs btn-edit">编辑</button>
                        <button class="btn btn-danger btn-xs btn-del">删除</button>
                        <button class="btn btn-success btn-xs btn-ok">确定</button>
                        <button class="btn btn-warning btn-xs btn-cancel">取消</button>
                    </td>
                </tr>
            `
        }, '')
    } else {
        alert('网络连接失败');
    }
}
utils.on(pagingNext, 'click', function () {
    utils.fetch('api/shop/pagingNext.php').then((resp) => {
        htmlRendering(resp);
    })
})
utils.on(pagingPrevious, 'click', function () {
    utils.fetch('api/shop/pagingPreve.php').then((resp) => {
        htmlRendering(resp);
    })
})
pagingNumBtns.forEach((btn,i) => {
    utils.on(btn, 'click', () =>{
        // lastIndex=index;
        // index=i;
        var page = Number(btn.innerHTML);
        utils.fetch('api/shop/pagingNum.php', { page }).then(resp => {
            htmlRendering(resp)
        })
    })
})